<template>
  <view class="comment-container">
    <!-- 原始动态内容 -->
    <view class="original-post">
      <view class="user-info">
        <image :src="post.userAvatar" class="avatar"></image>
        <view class="user-detail">
          <text class="nickname">{{ post.userName }}</text>
          <text class="time">{{ post.createTime }}</text>
        </view>
      </view>
      <view class="content">
        <text class="text">{{ post.content }}</text>
        <view class="image-list" v-if="post.images && post.images.length">
          <image 
            v-for="(img, index) in post.images" 
            :key="index"
            :src="img"
            mode="aspectFill"
            @tap="previewImage(post.images, index)"
          ></image>
        </view>
      </view>
    </view>

    <!-- 评论列表 -->
    <scroll-view 
      class="comment-list" 
      scroll-y 
      @scrolltolower="loadMoreComments"
    >
      <view class="comment-item" v-for="(comment, index) in comments" :key="index">
        <image :src="comment.userAvatar" class="avatar"></image>
        <view class="comment-content">
          <view class="comment-header">
            <text class="nickname">{{ comment.userName }}</text>
            <text class="time">{{ comment.createTime }}</text>
          </view>
          <text class="text">{{ comment.content }}</text>
          <!-- 回复列表 -->
          <view class="reply-list" v-if="comment.replies && comment.replies.length">
            <view 
              class="reply-item"
              v-for="(reply, replyIndex) in comment.replies"
              :key="replyIndex"
            >
              <text class="reply-user">{{ reply.userName }}</text>
              <text class="reply-text">{{ reply.content }}</text>
            </view>
          </view>
          <text class="reply-btn" @tap="handleReply(comment)">回复</text>
        </view>
      </view>
    </scroll-view>

    <!-- 评论输入框 -->
    <view class="comment-input">
      <input 
        type="text"
        v-model="commentText"
        :placeholder="placeholder"
        :focus="inputFocus"
        @blur="handleBlur"
      />
      <button 
        class="send-btn" 
        :disabled="!commentText.trim()" 
        @tap="handleSendComment"
      >发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      postId: '',
      post: {
        userAvatar: '',
        userName: '',
        createTime: '',
        content: '',
        images: []
      },
      comments: [],
      commentText: '',
      placeholder: '写评论...',
      inputFocus: false,
      replyTo: null,
      page: 1,
      loading: false,
      hasMore: true
    }
  },

  onLoad(options) {
    if (options.id) {
      this.postId = options.id
      this.loadPostDetail()
      this.loadComments()
    }
  },

  methods: {
    async loadPostDetail() {
      try {
        // TODO: 替换为实际的API调用
        // const res = await api.getPostDetail(this.postId)
        this.post = {
          userAvatar: '/static/images/avatar1.jpg',
          userName: '健康达人',
          createTime: '10分钟前',
          content: '分享一个保持健康的小技巧：每天坚持晨跑30分钟，让一天充满活力！',
          images: ['/static/images/post1.jpg']
        }
      } catch (error) {
        console.error('加载动态详情失败:', error)
      }
    },

    async loadComments() {
      if (this.loading || !this.hasMore) return
      
      this.loading = true
      try {
        // TODO: 替换为实际的API调用
        // const res = await api.getComments({
        //   postId: this.postId,
        //   page: this.page
        // })
        const mockComments = [
          {
            id: 1,
            userAvatar: '/static/images/avatar2.jpg',
            userName: '跑步爱好者',
            createTime: '5分钟前',
            content: '晨跑确实很好，我已经坚持3年了',
            replies: [
              {
                userName: '健康达人',
                content: '太棒了，继续加油！'
              }
            ]
          }
        ]
        
        if (this.page === 1) {
          this.comments = mockComments
        } else {
          this.comments = [...this.comments, ...mockComments]
        }
        
        this.hasMore = mockComments.length === 10 // 假设每页10条
        this.page++
      } catch (error) {
        console.error('加载评论失败:', error)
      } finally {
        this.loading = false
      }
    },

    loadMoreComments() {
      this.loadComments()
    },

    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    },

    handleReply(comment) {
      this.replyTo = comment
      this.placeholder = `回复 ${comment.userName}：`
      this.inputFocus = true
    },

    handleBlur() {
      setTimeout(() => {
        this.inputFocus = false
        this.placeholder = '写评论...'
        this.replyTo = null
      }, 100)
    },

    async handleSendComment() {
      if (!this.commentText.trim()) return
      
      try {
        const params = {
          postId: this.postId,
          content: this.commentText,
          replyTo: this.replyTo ? this.replyTo.id : null
        }
        
        // TODO: 替换为实际的API调用
        // await api.sendComment(params)
        
        // 重置输入框
        this.commentText = ''
        this.replyTo = null
        this.placeholder = '写评论...'
        
        // 重新加载评论
        this.page = 1
        this.hasMore = true
        this.loadComments()
        
        uni.showToast({
          title: '评论成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('发送评论失败:', error)
        uni.showToast({
          title: '评论失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.comment-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;

  .original-post {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .user-detail {
        .nickname {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          display: block;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .content {
      .text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
      }
      
      .image-list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        
        image {
          width: 220rpx;
          height: 220rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          border-radius: 8rpx;
          
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }

  .comment-list {
    background: #fff;
    padding: 0 30rpx;
    height: calc(100vh - 400rpx);
    
    .comment-item {
      display: flex;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .comment-content {
        flex: 1;
        
        .comment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          
          .nickname {
            font-size: 26rpx;
            color: #333;
            font-weight: bold;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
        }
        
        .reply-list {
          margin-top: 20rpx;
          background: #f8f8f8;
          padding: 20rpx;
          border-radius: 8rpx;
          
          .reply-item {
            font-size: 26rpx;
            margin-bottom: 10rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .reply-user {
              color: #007AFF;
              font-weight: bold;
            }
            
            .reply-text {
              color: #333;
            }
          }
        }
        
        .reply-btn {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
          display: inline-block;
        }
      }
    }
  }

  .comment-input {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
    
    input {
      flex: 1;
      height: 72rpx;
      background: #f5f5f5;
      border-radius: 36rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      margin-right: 20rpx;
    }
    
    .send-btn {
      width: 120rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: #007AFF;
      color: #fff;
      font-size: 28rpx;
      border-radius: 36rpx;
      padding: 0;
      
      &[disabled] {
        background: #ccc;
      }
    }
  }
}
</style> 